<template>
  <view class="container">
    <!--   头部区域   -->
    <view class="container-header">
      <view class="container-header__left">
        <template v-if="orderInfo.workOrderState === '6'&&orderInfo.estimationFlag === '1'">
          <view class="container-header-workOrderStateTtitle"
                :style="{ color: stateObject('estimationFlag').color }">
            <text>●</text>
            <text style="margin-left: 10rpx;">{{ stateObject(orderInfo.workOrderState).name }}</text>
          </view>
          <view class="container-header-workOrderStateTips">
            <!--            {{ stateObject('estimationFlag').tips }}-->
            {{
              orderInfo.workOrderRecord ? orderInfo.workOrderRecord.recordContent : stateObject(orderInfo.workOrderState).tips
            }}
          </view>
        </template>
        <template v-else>
          <view class="container-header-workOrderStateTtitle"
                :style="{ color: stateObject(orderInfo.workOrderState).color }">
            <text>●</text>
            <text style="margin-left: 10rpx;">{{ stateObject(orderInfo.workOrderState).name }}</text>
          </view>
          <view class="container-header-workOrderStateTips">
            <!--            {{ stateObject(orderInfo.workOrderState).tips }}-->
            {{
              orderInfo.workOrderRecord ? orderInfo.workOrderRecord.recordContent : stateObject(orderInfo.workOrderState).tips
            }}
          </view>
        </template>

      </view>
      <!--   右箭头按钮   -->
      <view class="container-header__right" @click="toFollowUpRecord">
        <u-icon name="arrow-right" size="32rpx" color="#2B2B2B"></u-icon>
      </view>
    </view>
    <!--   内容区域   -->
    <view class="container-body">
      <!--   预约信息区域   -->
      <view class="container-body__content">
        <view class="container-body__content-title">
          <text>预约信息</text>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>保洁项目:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ maintenanceItems }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>预约时间:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.appointmentTime ? orderInfo.appointmentTime : '--' }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>预计上门时间:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.estimateTime?orderInfo.estimateTime:'--' }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>保洁地址:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.premisesAddress }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>备注信息:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.workOrderRemark }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>报修人:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.contactsName }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>手机号:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.contactsPhone }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>紧急程度:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ urgencyDegreeMapping(orderInfo.urgencyDegree) }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>照片:</text>
            </view>
            <view class="container-body__content-info-item__photo">
              <!--   图片展示区域:点击预览大图  -->
              <view class="container-body__content-info-item__photo-item" v-for="(item, index) in faultPicture"
                    :key="index">
                <image :src="item" mode="aspectFit"
                       style="width: 100rpx; height: 100rpx;border: 1px solid #eee;"
                       @click.stop="showPhoto(index,faultPicture)"/>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--   工单信息区域   -->
      <view class="container-body__content">
        <view class="container-body__content-title">
          <text>工单信息</text>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>工单编号:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.workOrderId }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>申请时间:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ formatCnDate(orderInfo.createTime, 'yyyy-MM-dd hh:mm') }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item" v-if="orderInfo.workOrderState === '7'">
            <view class="container-body__content-info-item-label">
              <text>取消时间:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ cancelReasonTime }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item" v-if="orderInfo.workOrderState === '7'">
            <view class="container-body__content-info-item-label">
              <text>取消原因:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ cancelReason }}</text>
            </view>
          </view>
        </view>
      </view>
      <!--   接单信息区域:3:已接单、4:维修中、5:待缴费、6:已完成   -->
      <view class="container-body__content" v-if="[ '3', '4', '5', '6'].includes(orderInfo.workOrderState)">
        <view class="container-body__content-title">
          <text>接单信息</text>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item__left">
              <!--  头像区域 -->
              <view class="container-body__content-info-item__left-avatar">
                <image :src="defaultAvatar" mode="aspectFill"
                       style="width: 100rpx; height: 100rpx; border-radius: 50%;"/>
              </view>
              <view class="container-body__content-info-item__left-name">
                <text>{{ orderInfo.personName }}</text>
              </view>
            </view>
            <view class="container-body__content-info-item__right">
              <view class="phone-icon" @click.stop="showPhone">
                <u-icon name="phone-fill" size="50rpx" color="#02A7F0"></u-icon>
              </view>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>接单时间:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.receiveOrderTime }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item" v-if="orderInfo.workOrderState === '3'">
            <view class="container-body__content-info-item-label">
              <text>备注:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ cancelReason }}</text>
            </view>
          </view>
        </view>

      </view>
      <!--   维修上传区域:4:维修中、5:待缴费、6:已完成   -->
      <view class="container-body__content" v-if="[ '4', '5', '6'].includes(orderInfo.workOrderState)">
        <view class="container-body__content-title">
          <text>保洁信息</text>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>保洁前:</text>
            </view>
            <view class="container-body__content-info-item__photo">
              <!--   图片展示区域:点击预览大图  -->
              <view class="container-body__content-info-item__photo-item"
                    v-for="(item, index) in pictureList(orderInfo.workOrderBeforePicture)" :key="index">
                <image :src="item" mode="aspectFit"
                       style="width: 100rpx; height: 100rpx;border: 1px solid #eee;"
                       @click.stop="showPhoto(index,pictureList(orderInfo.workOrderBeforePicture))"/>
              </view>
            </view>
          </view>
          <view class="tip-text" v-if="orderInfo.workOrderBeforeTime">上传时间：{{ orderInfo.workOrderBeforeTime }}
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>保洁后:</text>
            </view>
            <view class="container-body__content-info-item__photo">
              <!--   图片展示区域:点击预览大图  -->
              <view class="container-body__content-info-item__photo-item"
                    v-for="(item, index) in pictureList(orderInfo.workOrderAfterPicture)" :key="index">
                <image :src="item" mode="aspectFit"
                       style="width: 100rpx; height: 100rpx;border: 1px solid #eee;"
                       @click.stop="showPhoto(index,pictureList(orderInfo.workOrderAfterPicture))"/>
              </view>
            </view>
          </view>
          <view class="tip-text" v-if="orderInfo.workOrderAfterTime">上传时间：{{ orderInfo.workOrderAfterTime }}
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>说明:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.workOrderExplain ? orderInfo.workOrderExplain : '' }}</text>
            </view>
          </view>
        </view>
      </view>
      <!--   缴费单区域:5:待缴费、6:已完成   -->
      <view class="container-body__content" v-if="[ '5', '6'].includes(orderInfo.workOrderState)">
        <view class="container-body__content-title">
          <text>缴费单</text>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-item" v-if="orderInfo.workOrderState === '5'">
            <view class="container-body__content-info-item-label">
              <text>需缴费金额:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text style="color: #F9B523; font-size: 30rpx;">{{ totalCost }}元</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <!--   表格形式  -->
<!--            <view class="container-body__content-info-item__table">-->
<!--              <view class="container-body__content-info-item__table__header">-->
<!--                <view class="container-body__content-info-item__table__header-item">-->
<!--                  <text>维修项目</text>-->
<!--                </view>-->
<!--                <view class="container-body__content-info-item__table__header-item">-->
<!--                  <text>材料费(元)</text>-->
<!--                </view>-->
<!--                <view class="container-body__content-info-item__table__header-item">-->
<!--                  <text>劳务费</text>-->
<!--                </view>-->
<!--                <view class="container-body__content-info-item__table__header-item">-->
<!--                  <text>数量</text>-->
<!--                </view>-->
<!--              </view>-->
<!--              <view class="container-body__content-info-item__table__content"-->
<!--                    v-for="(item,index) in orderInfo.workOrderChargeItemList"-->
<!--                    :key="index">-->
<!--                <view class="container-body__content-info-item__table__content-item">-->
<!--                  <text>{{ item.itemName }}</text>-->
<!--                </view>-->
<!--                <view class="container-body__content-info-item__table__content-item">-->
<!--                  <text>{{ item.materialCost }}</text>-->
<!--                </view>-->
<!--                <view class="container-body__content-info-item__table__content-item">-->
<!--                  <text>{{ item.laborCost }}</text>-->
<!--                </view>-->
<!--                <view class="container-body__content-info-item__table__content-item">-->
<!--                  <text>{{ item.chargeQuantity }}</text>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
            <!--     卡片形式        -->
            <view class="container-body__content-info-item__card">
              <view class="container-body__content-info-item__card-item" v-for="(item,index) in orderInfo.workOrderChargeItemList">
                <view class="container-body__content-info-item__card-item-row">
                  <view class="container-body__content-info-item__card-item-row-label">
                    <text>项目名称:</text>
                  </view>
                  <view class="container-body__content-info-item__card-item-row-value">
                    <text>{{ item.itemName }}</text>
                  </view>
                </view>
                <view class="container-body__content-info-item__card-item-row">
                  <view class="container-body__content-info-item__card-item-row-label">
                    <text>材料费:</text>
                  </view>
                  <view class="container-body__content-info-item__card-item-row-value">
                    <text>{{ item.materialCost }}</text>
                  </view>
                </view>
                <view class="container-body__content-info-item__card-item-row">
                  <view class="container-body__content-info-item__card-item-row-label">
                    <text>劳务费:</text>
                  </view>
                  <view class="container-body__content-info-item__card-item-row-value">
                    <text>{{ item.laborCost }}</text>
                  </view>
                </view>
                <view class="container-body__content-info-item__card-item-row">
                  <view class="container-body__content-info-item__card-item-row-label">
                    <text>数量:</text>
                  </view>
                  <view class="container-body__content-info-item__card-item-row-value">
                    <text>{{ item.chargeQuantity }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="container-body__content-info__footer">
            <view class="container-body__content-info__footer-text">
              <text style="color: #F9B523; font-size: 30rpx;">合计: {{ totalCost }} 元</text>
            </view>
            <view class="container-body__content-info__footer-text">
              <text>提交时间：{{ orderInfo.workCompletedTime }}</text>
            </view>
          </view>
        </view>
      </view>
      <!--   缴费完成区域:6:已完成   -->
      <view class="container-body__content" v-if="[ '6'].includes(orderInfo.workOrderState)">
        <view class="container-body__content-title">
          <text>缴费完成</text>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>缴费金额:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text style="color: #F9B523; font-size: 30rpx;">{{ totalCost }}元</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>缴费时间:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.paymentTime }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>支付方式:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ paymentTypeMap[orderInfo.paymentType] }}</text>
            </view>
          </view>
        </view>
      </view>
      <!--   评价区域:已评价   -->
      <view class="container-body__content" v-if="orderInfo.estimationFlag === '1'">
        <view class="container-body__content-title">
          <text>我的评价</text>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>*满意度评价</text>
            </view>
          </view>
          <view class="container-body__content-info-item" v-for="(item,index) in rateList" :key="index"
                style="justify-content: flex-start">
            <view class="container-body__content-info-item-label">
              <text>{{ item.label }}:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <view class="container-body__content-info-item-value__rate">
                <u-rate :count="5" active-color="#F59A23" v-model="item.value" size="40rpx" readonly></u-rate>
              </view>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>评价内容:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.workOrderEvaluation.evaluateContent }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text></text>
            </view>
            <view class="container-body__content-info-item__photo">
              <!--   图片展示区域:点击预览大图  -->
              <view class="container-body__content-info-item__photo-item" v-for="(item, index) in evaluationPicture"
                    :key="index">
                <image :src="item" mode="aspectFit"
                       style="width: 100rpx; height: 100rpx;border: 1px solid #eee;"
                       @click.stop="showPhoto(index,evaluationPicture)"/>
              </view>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>评价时间:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.workOrderEvaluation.createTime }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--   底部区域   -->
    <view class="container-footer">
      <!--  操作按钮区域    -->
      <view class="container-footer__buttons">
        <template v-if="['1', '2', '3'].includes(orderInfo.workOrderState)">
          <button class="footer-button" size="small" @click="handleEdit">修改预约</button>
          <button class="footer-button" size="small" @click="handleCancel(orderInfo)">取消预约</button>
        </template>
        <!--     状态：待缴费      -->
        <template v-if="['5'].includes(orderInfo.workOrderState)">
          <!--  <button class="footer-button" size="small" @click="handlePay">立即缴费</button>-->
          <u-button type="primary" text="立即缴费" @click="handlePay"></u-button>
        </template>
        <!--     状态：已完成       -->
        <template v-if="['6'].includes(orderInfo.workOrderState)">
          <button class="footer-button" size="small" @click="handleEvaluate" v-if="orderInfo.estimationFlag === '0'">
            评价
          </button>
        </template>
        <!--     状态：已取消       -->
        <template v-if="['7'].includes(orderInfo.workOrderState)">
          <button class="footer-button" size="small" @click="handleDelete">删除</button>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import {stateMapping, maintenanceTypeMapping, urgencyDegreeMapping} from "./commonData/index";
import {deleteWorkOrder, getWorkOrderDetail} from "@/api/manager/workOrder";
import {formatCnDate} from "@/utils/time";

export default {
  data() {
    return {
      //工单id
      workOrderId: '',
      orderInfo: {},
      //评分列表
      rateList: [
        {label: '总体评价', value: null, key: 'totalityScore'},
        {label: '相应速度', value: null, key: 'respondScore'},
        {label: '服务态度', value: null, key: 'serveScore'},
        {label: '处理结果', value: null, key: 'resultScore'},
      ],
      // 默认头像
      defaultAvatar: require('@/static/logo.png'),
      // 支付方式
      paymentTypeMap: {
        '1': '扫码支付',
        '2': '微信支付',
        '3': '线下支付'
      },

    };
  },
  computed: {
    stateObject() {
      return (workOrderState) => {
        let obj = stateMapping.find(item => item.workOrderState === workOrderState);
        return obj ? obj : {};
      }
    },
    //维修类型
    maintenanceTypeMapping() {
      return (value) => {
        let obj = maintenanceTypeMapping.find(item => item.value === value);
        return obj ? obj.label : '';
      }
    },
    //紧急程度
    urgencyDegreeMapping() {
      return (value) => {
        let obj = urgencyDegreeMapping.find(item => item.value === value);
        return obj ? obj.label : '';
      }
    },
    //故障图片
    faultPicture() {
      return this.orderInfo.faultPicture ? this.orderInfo.faultPicture.split(',') : []
    },
    //维修前后图片处理
    pictureList() {
      return (value) => {
        return value && Array.isArray(value) ? value : value.split(',')
      }
    },
    // 维修项目
    maintenanceItems() {
      let list = this.orderInfo.workOrderChargeItemList ? this.orderInfo.workOrderChargeItemList.map(item => item.itemName) : []
      return list.join(' | ')
    },
    //总计费用
    totalCost() {
      let total = 0
      if (this.orderInfo.workOrderChargeItemList && this.orderInfo.workOrderChargeItemList.length > 0) {
        this.orderInfo.workOrderChargeItemList.forEach(item => {
          total += (item.materialCost * item.chargeQuantity) + item.laborCost
        })
      }
      return total.toFixed(2)
    },
    //评价图片
    evaluationPicture() {
      return this.orderInfo.workOrderEvaluation ? this.orderInfo.workOrderEvaluation.evaluateImg ? this.orderInfo.workOrderEvaluation.evaluateImg.split(',') : [] : []
    },
    cancelReasonTime() {
      return this.orderInfo.workOrderRecord ? this.orderInfo.workOrderRecord.createTime : ''
    },
    cancelReason() {
      let recordContent = this.orderInfo.workOrderRecord ? this.orderInfo.workOrderRecord.recordContent : ''
      let arr = recordContent.split('备注', 2)
      let arr2 = recordContent.split('备注：', 2)

      console.log('arr', arr)
      if (arr2.length > 1) {
        return arr2[1]
      }
      if (arr.length > 1) {
        return arr[1]
      }
      return ''
    }
  },
  onLoad(options) {
    console.log('detail options:', options);
    this.workOrderId = options.workOrderId
    // this.init()
  },
  onShow() {
    this.init();
  },
  methods: {
    formatCnDate,
    init() {
      // 获取工单详情
      this.getWorkOrderDetail();
    },
    // 获取工单详情
    getWorkOrderDetail() {
      if (!this.workOrderId) {
        return
      }
      getWorkOrderDetail(this.workOrderId).then(res => {
        if (res.code === 200) {
          this.orderInfo = res.data;
          //处理评价内容
          if (this.orderInfo.estimationFlag === '1' && this.orderInfo.workOrderEvaluation) {
            this.rateList.forEach(item => {
              item.value = this.orderInfo.workOrderEvaluation[item.key]
            })
          }
        }
      })
    },
    // 展示图片
    showPhoto(index, list) {
      console.log('index:', index)
      console.log('showPhoto', list);
      // 预览大图
      uni.previewImage({
        current: index,
        urls: list,
      })
    },
    // 展示手机号
    showPhone() {
      console.log('showPhone');
      uni.makePhoneCall({
        phoneNumber: this.orderInfo.personPhone
      })
    },
    // 跟进记录
    toFollowUpRecord() {

      this.$tab.navigateTo("./followUp-record?workOrderId=" + this.orderInfo.workOrderId)
    },
    // 修改预约
    handleEdit() {
      console.log('修改预约');
      this.$tab.navigateTo('./add?workOrderId=' + this.orderInfo.workOrderId)
    },
    // 取消预约
    handleCancel(item) {
      console.log('取消预约');
      let data = JSON.stringify(item);
      this.$tab.navigateTo('./cancel?data=' + data)
    },
    // 立即缴费
    handlePay() {
      console.log('立即缴费');
      this.$tab.navigateTo('./pay?workOrderId=' + this.orderInfo.workOrderId)
    },
    // 评价
    handleEvaluate() {
      console.log('评价');
      this.$tab.navigateTo('./rate?workOrderId=' + this.orderInfo.workOrderId)
    },
    // 删除
    handleDelete() {
      uni.showModal({
        title: '确认删除',
        content: '确定删除该工单？',
        success: (res) => {
          if (res.confirm) {
            deleteWorkOrder(this.orderInfo.workOrderId).then(res => {
              if (res.code === 200) {
                uni.showToast({
                  title: res.msg || '删除成功',
                  icon: 'none',
                })
                setTimeout(() => {
                  this.back()
                }, 1000)
              }
            })
          } else if (res.cancel) {
            console.log('取消删除')
          }
        }
      })
    },
    // 返回
    back() {
      // 判断当前页面是否有上一页
      let pages = getCurrentPages()
      if (pages.length > 1) {
        // 页面栈中有上一页，则返回上一页
        this.$tab.navigateBack()
      } else {
        this.$tab.redirectTo('./list')
      }
    },
  },
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;

  .container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 20rpx;

    &-workOrderStateTtitle {
      font-size: 30rpx;
    }

    &-workOrderStateTips {
      font-size: 24rpx;
      color: #2B2B2B;
      margin-top: 10rpx;
    }

    &__right {
      text-align: right;
      width: 60rpx;
      padding: 20rpx 0;
    }

  }

  .container-body {
    margin-bottom: 160rpx;

    &__content {
      margin-top: 20rpx;
      background-color: #fff;
      padding: 20rpx;

      &-title {
        padding: 20rpx 0;
        font-size: 32rpx;
        margin-bottom: 20rpx;
        font-weight: bold;
        border-bottom: 1px solid #EBEBEB;
      }

      &-info {

        &-item {
          margin-bottom: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          &-label {
            font-size: 28rpx;
            color: #2B2B2B;
            min-width: 160rpx;
          }

          &-value {
            font-size: 28rpx;
            color: #2B2B2B;
            margin-left: 20rpx;
          }

          &__photo {
            //display: flex;
            //justify-content: space-between;
            //flex-wrap: wrap;
            //margin-top: 10rpx;
            display: grid;
            grid-template-columns:repeat(auto-fit, 100rpx);
            grid-gap: 10rpx; //元素之间的距离 相当于margin的效果
            max-width: 500rpx;
          }

          &__left {
            display: flex;
            align-items: center;

            &-avatar {

            }

            &-name {
              margin-left: 20rpx;
              font-size: 30rpx;
              color: #2B2B2B;
            }
          }

          &__right {
            .phone-icon {
              border-radius: 50%;
              border: 1rpx solid #02A7F0;
              width: 60rpx;
              height: 60rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .container-body__content-info-item__table {
            flex: 1;

            &__header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 20rpx;
              margin-bottom: 20rpx;
              background-color: #F0F1F5;
              padding: 20rpx 0;
              border: 1rpx solid #EBEBEB;

              &-item {
                flex: 1;
                text-align: center;
                font-size: 28rpx;
                color: #2B2B2B;
              }
            }

            &__content {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 20rpx;
              margin-bottom: 20rpx;
              border-bottom: 1px solid #EBEBEB;

              &-item {
                flex: 1;
                text-align: center;
                font-size: 28rpx;
                color: #2B2B2B;
              }
            }
          }

          .container-body__content-info-item__card {
            width: 100%;
            .container-body__content-info-item__card-item {
              border-bottom: 1px solid #EBEBEB;
              .container-body__content-info-item__card-item-row{
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 margin-top: 20rpx;
                 margin-bottom: 20rpx;
              }
              :last-child{
                border-bottom: none;
              }
            }
          }
        }

        .container-body__content-info__footer {
          &-text {
            font-size: 28rpx;
            text-align: right;
            margin-bottom: 20rpx;
          }
        }

        .tip-text {
          text-align: right;
          font-size: 28rpx;
          color: #AAAAAA;
          margin-bottom: 20rpx;
        }
      }
    }
  }

  .container-footer {
    .container-footer__buttons {
      padding: 30rpx 20rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;

      .footer-button {
        width: 160rpx;
        margin: 0 0 0 20rpx;
        font-size: 24rpx;
        border: 1rpx solid #eee;
        background: #fff;

        &:first-child {
          margin-left: 0;
        }

        &:active {
          background: #eee;
        }
      }
    }

  }
}
</style>
